<template>
  <div class="info-panel" :class="{ expanded: isExpanded }">
    <div class="panel-header" @click="toggleExpanded">
      <h3 class="panel-title">
        <span class="title-icon">{{ icon }}</span>
        {{ title }}
      </h3>
      <button class="expand-btn" :class="{ rotated: isExpanded }">
        <span class="expand-icon">▼</span>
      </button>
    </div>
    
    <transition name="panel-content">
      <div v-if="isExpanded" class="panel-content">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  title: string
  icon?: string
  defaultExpanded?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  icon: 'ℹ️',
  defaultExpanded: true
})

const isExpanded = ref(props.defaultExpanded)

function toggleExpanded() {
  isExpanded.value = !isExpanded.value
}
</script>

<style scoped>
.info-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.info-panel:hover {
  border-color: var(--primary-color);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  cursor: pointer;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
}

.panel-header:hover {
  background: var(--bg-hover);
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.title-icon {
  font-size: 1.2rem;
}

.expand-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.expand-btn:hover {
  background: var(--bg-hover);
  color: var(--primary-color);
}

.expand-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.expand-btn.rotated .expand-icon {
  transform: rotate(180deg);
}

.panel-content {
  padding: 1rem;
}

/* 过渡动画 */
.panel-content-enter-active,
.panel-content-leave-active {
  transition: all 0.2s ease;
  overflow: hidden;
}

.panel-content-enter-from,
.panel-content-leave-to {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.panel-content-enter-to,
.panel-content-leave-from {
  opacity: 1;
  max-height: 500px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .panel-header {
    padding: 0.75rem;
  }
  
  .panel-content {
    padding: 0.75rem;
  }
  
  .panel-title {
    font-size: 0.9rem;
  }
}
</style>